<script setup>
import { reactive, onMounted } from 'vue';
import { api } from '@T2/plugins/env-config.ts';
import { guzhangstepApi as MainApi } from '@T2/service/api.ts';
import { downloadFiles } from '@T2/utils/utils.ts';
import ImagePreview from '@T2/components/imagePreview/index.vue';

const { content } = defineProps({
  content: {
    type: Object,
    required: true,
  },
});

const Resd = reactive({
  list: [],
});
onMounted(() => {
  GetMainTable();
});
const GetMainTable = () => {
  MainApi({
    method: 'get',
    params: {
      guzhang: content.id,
    }
  }).then(res => {
    Resd.list = res?.results || [];
  });
}

const imgPopup = reactive({
  visible: false,
  images: [],
});
const showImages = (arrs) => {
  imgPopup.visible = true;
  imgPopup.images = [];
  arrs?.forEach(item => {
    imgPopup.images.push({
      id: item.id,
      name: item.name,
      url: `${ api + item.file_url }`,
    });
  });
}
</script>

<template>
  <el-step v-for="item in Resd.list">
    <template #icon>
      <div class="step-icon"></div>
    </template>
    <template #title>
      <div class="title-line1 flex--center">
        <span class="title-name">审核记录</span>
        <el-icon color="#888888"><Clock /></el-icon>
        <span class="create-time">{{ item.create_time }}</span>
        <label class="create-user">处理人：<strong>{{ content.creater_name }}</strong></label>
      </div>
    </template>
    <template #description>
      <template v-if="item.action === '故障审核'">
        <div class="stepDetail-box flex flex-wrap">
          <div class="info-item">
            <label>审批意见：</label>
            <span>{{ item.yj }}</span>
          </div>
          <div class="info-item" style="width: 100%;">
            <label>审批说明：</label>
            <span>{{ item.info }}</span>
          </div>
          <div class="info-item" style="width: 100%;" v-if="item.fj?.length">
            <label>相关附件：</label>
            <div class="flex-column">
              <div class="fj-item flex-sb-center" v-for="item in item.fj_json">
                <el-button type="primary" link @click="downloadFiles(item.name, item.file_url)">
                  <el-icon style="margin-right: 4px;"><Paperclip /></el-icon>{{ item.name }}
                </el-button>
              </div>
            </div>
          </div>
        </div>
      </template>
      
      <el-dialog v-model="imgPopup.visible" title="图片预览" width="fit-content">
        <div style="width: 800px; height: 600px;">
          <ImagePreview :images="imgPopup.images"/>
        </div>
      </el-dialog>
    </template>
  </el-step>
</template>

<style lang="scss" scoped>
@use './style.scss';
.stepDetail-box {
  margin-top: 4px;
  padding: 12px 14px;
}
.class-name {
  width: 100%;
  font-weight: 600;
  font-size: 16px;
  color: #252525;
  line-height: 19px;
  margin-bottom: 8px;
  span {
    margin-left: 12px;
    font-weight: 400;
    font-size: 14px;
    color: #888888;
  }
}
.class-name:not(:first-child) {
  margin-top: 16px;
}
.info-item {
  width: calc(100% / 3);
}
.info-item {
  margin: 8px 0;
  display: flex;
  align-items: flex-start;
  label {
    font-weight: 500;
    font-size: 14px;
    color: #888888;
    white-space: nowrap;
  }
  span {
    font-weight: 400;
    font-size: 14px;
    color: #111111;
  }
  .fj-item {
    margin-bottom: 5px;
    border-bottom: 1px solid #e6e6e6;
    &:last-child {
      margin-bottom: 0;
    }
  }
  
}
</style>